<div>

  <div class="row">
    <h3 ng-click="currentItem=null" id="title">Protractor API <small>{{::version}}</small></h3>
  </div>

  <!-- Search -->
  <div class="row">
    <div class="form-group">
      <label for="searchInput">Search</label>
      <input id="searchInput"
          autofocus
          class="form-control"
          type="search"
          placeholder="Enter name"
          ng-model="searchTerm"/>
    </div>
  </div>

  <div class="row">
    <!-- Small screen -->
    <div class="visible-xs">
      <div class="toggle-menu-button-container">
        <button type="button"
            id="toggle-menu-button"
            class="btn btn-primary"
            ng-click="toggleMenu()"
            ng-bind="toggleMenuLabel()"></button>
      </div>

      <div ng-if="isMenuVisible" class="mobile-menu">
        <span ng-repeat="item in items | filter:searchTerm"
            ng-switch="item.type">
            <div ng-switch-when="title"
                class="title"
                ng-class="item.treeClasses"
                ng-bind="item.displayName">
            </div>
            <span ng-switch-when="child">
              <a href="#/api?view={{item.name}}"
                  class="child"
                  ng-class="item.treeClasses"
                  ng-bind="item.displayName"></a>
            </span>
            <div ng-switch-default class="parent">
              <a href="#/api?view={{item.name}}"
                  ng-class="item.treeClasses"
                  ng-bind="item.title"></a>
            </div>
        </span>
      </div>
    </div>

    <!-- Large screen -->
    <div class="hidden-xs">
      <div class="col-sm-3 api-left-nav">
        <ul class="list-unstyled">
          <li ng-repeat="item in items | filter:searchTerm"
              title="{{item.name}}"
              ng-switch="item.type">
            <span ng-switch-when="title"
                class="title"
                ng-class="item.treeClasses"
                ng-bind="item.displayName">
            </span>
            <a ng-switch-when="child"
                href="#/api?view={{item.name}}"
                class="child"
                ng-class="item.treeClasses"
                ng-bind="item.displayName">
            </a>
            <a ng-switch-default
                href="#/api?view={{item.name}}"
                ng-class="item.treeClasses"
                ng-bind="item.title"></a>
          </li>
        </ul>
      </div>
    </div>

    <div ng-if="!currentItem" class="col-sm-9">
      <h3 class="api-title">
        Protractor API Docs
      </h3>
      <p>
        Welcome to the Protractor API documentation. The menu lists all classes and methods
        exposed by Protractor.
      </p>
      <p>
        Note that Protractor is a wrapper around
        <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/index.html">selenium-webdriver</a>,
        the Webdriver bindings for Node.js. See that documentation for advanced usage.
      </p>
    </div>

    <div ng-if="currentItem" class="col-sm-9">
      <h3 class="api-title">
        {{currentItem.title}}
        <small ng-if="currentItem.sourceLink">
          <a href="{{currentItem.sourceLink}}" target="_blank">View code</a>
        </small>
        <h4 ng-if="currentItem.alias != currentItem.displayName"
            class="text-muted">{{currentItem.name}}</h4>
      </h3>
      <p ng-bind-html="trust(currentItem.description)"></p>

      <div ng-if="currentItem.example">
        <h4>Example</h4>

        <!-- View -->
        <div ng-if="currentItem.view">
          <h5 class="text-muted">View</h5>
          <pre ptor-code="currentItem.htmlView"></pre>
        </div>

        <!-- Code -->
        <h5 class="text-muted">Code</h5>
        <pre ptor-code="currentItem.example"></pre>
      </div>

      <!-- Params -->
      <div ng-if="currentItem.params">
        <h4>Params</h4>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Param</th>
                <th>Type</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
            <tr ng-repeat="param in currentItem.params">
              <td>{{param.name}}</td>
              <td ng-bind-html="trust(param.paramString)"></td>
              <td>{{param.description}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Returns -->
      <div ng-if="currentItem.returns">
        <h4>Returns</h4>

        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
            <tr>
              <td ng-bind-html="trust(currentItem.returnString)"></td>
              <td ng-bind-html="trust(currentItem.returns.description)"></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Children -->
      <div ng-if="currentItem.children">
        <h4>Functions</h4>

        <div ptor-function-list="currentItem.children"></div>
      </div>

      <!-- Extends -->
      <div ng-if="currentItem.extends">
        <h4>Extends {{currentItem.base.title}}</h4>

        <div ptor-function-list="currentItem.base.children"></div>

        <!-- Extension Extends -->
        <div ng-if="currentItem.base.extends">
          <h4>Extends {{currentItem.base.base.title}} (via {{currentItem.base.title}})</h4>

          <div ptor-function-list="currentItem.base.base.children"></div>
        </div>
      </div>
    </div>
  </div>
</div>
